<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js"></script>
		<script src="//unpkg.com/vue/dist/vue.js"></script>
		<script src="//unpkg.com/element-ui@2.15.7/lib/index.js"></script>		
		
		<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
		
		
		
		<!-- vue---进行post和get请求 -->
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	
	<style type="text/css">
		@import url("//unpkg.com/element-ui@2.15.7/lib/theme-chalk/index.css");

	</style>
	
	</head>
	
	<body>
		
		</script>
		
		<!-- =========================================================== -->
		
		
		<div id="app2">
		<template>
		  <el-button type="text" @click="open">点击打开 Message Box</el-button>
		</template>
		</div>
		
		
		<!-- =========================================================== -->
		
		<div id="app1">
		<template>
		  <el-button type="text" @click="open">新增面试问题</el-button>
		</template>
		</div>

		
		<div id="table">
		<template>
		    <el-table
		      :data="questionList"
		      style="width: 100%">
		      <el-table-column
		        prop="id"
		        label="序号"
		        width="50">
		      </el-table-column>
		      <el-table-column
		        prop="question"
		        label="面试问题"
		        width="500">
		      </el-table-column>
		      <el-table-column
		        prop="studentAnswer"
		        label="学生回答"
				width="500">
		      </el-table-column>
			  <el-table-column
			    prop="teacherAnswer"
			    label="老师回答"
			  	width="500">
			  </el-table-column>
			  
			  <el-table-column
			    label="操作"
			  	width="200">
				<el-button>修改</el-button>
				<el-button>删除</el-button>
			  </el-table-column>
			  
			  
		    </el-table>
		  </template>
		</div>
		
		

		
	
	</body>
	
	
	
	<script>
	
		
		var Main2 = {
		    methods: {
		      open() {
		        this.$prompt('请输入邮箱', '提示', {
		          confirmButtonText: '确定',
		          cancelButtonText: '取消',
		        }).then(({ value }) => {
		          this.$message({
		            type: 'success',
		            message: '你的邮箱是: ' + value
		          });
		        }).catch(() => {
		          this.$message({
		            type: 'info',
		            message: '取消输入'
		          });       
		        });
				
		      }
		    }
		  }
		var Ctor = Vue.extend(Main2)
		new Ctor().$mount('#app2')
	

		 var Main1 = {
		     methods: {
		       open() {
		         this.$alert('这是一段内容', '标题名称', {
		           confirmButtonText: '确定',
		           callback: action => {
		             this.$message({
		               type: 'info',
		               message: `action: ${ action }`
		             });
		           }
		         });
		       }
		     }
		   }
		 var Ctor = Vue.extend(Main1)
		 new Ctor().$mount('#app1')
		 
		 
		window.onload = function() {
				var table = new Vue({
				el: '#table',
				data: {
					questionList: {},
				},
				methods:{
					get: function() {
						var url = 'http://localhost:8080/kaoqin/question/findAllQuestion';
						this.$http.get(url).then(function(backdatas) {
							// 拿到code码
							var code = backdatas.body.code;
							
							// 拿到后台返回的数据
							var dataR = backdatas.body.data;
							
							// 把 dataR 给 table的roleList属性
							table.questionList = dataR;
							console.log(table.questionList)
						});
					},
				},
				
			});
			table.get();
		}
		 
		 
	</script>
		
		
		
</html>
